<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/member/record2.css">
    <link rel="stylesheet" href="../../css/public/base.css">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../js/public/jquery-3.3.1.js"></script>
</head>
<style>
    .nav_two .left>ul>li>ul>li:last-child {
        background-color: #e5f1fc;
    }

    .nav_two {

        margin-right: 20px;
        height: 100%;
        color: #666;
    }

    .nav_two .left {

        /* text-align: center; */
        /* border: 1px solid #000; */
        background-color: #FFF;
        height: 100%;
        border-radius: 8px;
        font-size: 16px;
        width: 200px;
    }

    .nav_two .left>ul li {
        min-height: 53px;
        line-height: 53px;
        list-style-type: none;
        position: relative;
        cursor: pointer;

    }

    .nav_two .left>ul li a {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .nav_two .left>ul li ul {
        transition: all 0.2s;
        max-height: 0;
        overflow: hidden;
        /* display: none; */
    }

    .nav_two .left>ul li ul li {
        min-height: 53px;
    }

    .nav_two .left>ul li img {
        position: relative;
        left: 30px;
        transition: all 0.2s;
        transform: rotate(180deg)
    }

    .nav_two .active {
        background-color: #e5f1fc;
    }

    .nav_two .left>ul li .bbx {
        max-height: 300px;
    }

    .rotate {
        transform: rotate(0deg)!important;
    }
    .xia ul li{
      padding-left: 20px;
      font-size: 15px;
    }
</style>

<body>
    <form class="layui-form" action="">

        <div class="main">
            <div class="left">
                <div class='nav_two'>
                    <div class="left">
                        <ul>
                            <li><span class="circle"></span><a href="../member/MemberManagement.html"></a>会员管理</li>
                            <li><span class="circle"></span><a href="../member/mailbox.html"></a>会员信箱</li>
                            <li class='xia'>
                                <span class='xiaspan'><span class="circle"></span>交易额管理 <img src="../../image/xiala.png"
                                        alt=""></span>

                                <ul>
                                    <li><a href="../../html/member/DealImport.html"></a><span class="circle"></span>交易额导入</li>
                                    <li><a href="../../html/member/record .html"></a><span class="circle"></span>交易额记录</li>
                                </ul>
                            </li>
                            <li><span class="circle"></span><a href="../member/Upgrade.html"></a>用户升级记录</li>
                            <li><span class="circle"></span><a href="../member/Recommend.html"></a>推荐图谱</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="top">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label wdStyle">手机号码：</label>
                            <input type="text" style="width:196px;" placeholder="请输入…" class="layui-input">
                        </div>

                        <div class="layui-inline" style="margin-right: 30px;">
                            <label class="layui-form-label wdStyle">账号：</label>
                            <input type="text" style="width:196px;" placeholder="请输入…" class="layui-input">
                        </div>
                        <div class="layui-inline checkStyle">
                            <div class="layui-inline">
                                <button class="layui-btn btnStyle" lay-submit="" lay-filter="demo1">查询</button>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn btnStyle2" lay-submit="" lay-filter="demo1">重置</button>
                            </div>
                        </div>

                        <!-- <div class="layui-inline open-w">
                            展开<i class="layui-icon layui-icon-down"></i>
                        </div> -->
                    </div>
                </div>
                <div class="button">
                    <table class="layui-table" id="demo" lay-filter="test"></table>
                </div>
                <!-- <div class="paging">
                    <div id="demo3"></div>
                </div> -->
            </div>
        </div>
    </form>
    <!-- </div> -->
    <script src="../../layui/layui.js"></script>
    <script src='../../js/member/member.js'></script>
    <script>
        var t = document.querySelector.bind(document)
        let flag = localStorage.getItem('twonav')
        if (flag == '1') {
            t('.xia>ul').classList.add('bbx')
            t('.xia img').classList.add('rotate')
        }
        t('.xiaspan').onclick = function () {
            flag = flag == 0 ? 1 : 0
            t('.xia>ul').classList.toggle('bbx')
            t('.xia img').classList.toggle('rotate')
            localStorage.setItem('twonav', flag)
        }
    </script>
    <script>
        layui.use(['form', 'element', 'table', 'laypage', 'layer'], function () {
            var element = layui.element
                , table = layui.table
                , laypage = layui.laypage
                , layer = layui.layer;

            //监听导航点击
            element.on('nav(demo)', function (elem) {
                //console.log(elem)
                layer.msg(elem.text());
            });

            laypage.render({
                elem: 'demo3'
                , prev: '<em><</em>'
                , next: '<em>></em>'
                , count: 100
                , layout: ['limit', 'skip', 'prev', 'page', 'next']
                , jump: function (obj) {
                    console.log(obj)
                }
            });

            table.render({
                elem: '#demo'
                , skin: 'nob'
                , page: true
                , cols: [[
                    { type: 'checkbox', minWidth: 80, unresize: true }
                    , { field: 'id', title: '序号', minWidth: 80, unresize: true }
                    , { field: 'account', title: '会员账号', minWidth: 150, unresize: true }
                    , { field: 'name', title: '姓名', minWidth: 80, unresize: true }
                    , { field: 'phone', title: '电话', minWidth: 120, unresize: true }
                    , { field: 'money', title: '奖励建仓金额', width: 100, unresize: true } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , { field: 'time', title: '时间', minWidth: 180, unresize: true }
                    , { field: 'count', title: '数量', minWidth: 100, unresize: true }
                ]]
                , data: [{
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }, {
                    "id": "01",
                    'account': '12345@123.com',
                    'name': '张三',
                    'phone': '13000000000',
                    'money': '800.00',
                    'time': '2018.01.01 18:00:00',
                    'count': '20000.0',
                }]
            });
        });
    </script>
</body>

</html>